<template>
  <!-- <view>
    <image :src="picurl"> </image>
    <button type="primary" :loading="false">按钮</button>
  </view> -->
  <view class="box" :class="{active:isActive}">
  	v-bind指令
  </view>
  
  <view class="box" :class="isActive ? 'active' : ''">
  	v-bind三元
  </view>
</template>

<script setup>
import { ref } from "vue";

const isActive = ref(false);

const arrs = ref([
  "https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg",
  "https://img.yzcdn.cn/public_files/2017/10/24/fd043eb991198ccf522489c",
]);
const picurl = ref(
  "https://img.yzcdn.cn/public_files/2017/10/24/2f9a36046449dafb8608e99990b3c205.jpeg"
);

let i = 0;
setInterval(() => {
  i++;
  picurl.value = arrs.value[i % 4];
  isActive.value = !isActive.value;
}, 1000);


</script>

<style lang="scss">
	.box{
		width: 200px;
		height: 200px;
		background: orange;
		font-size: 20px;
	}
	.active{
		background: green;
		color:#fff;
	}
</style>
